<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工任务中心</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .container {
            width: 100%;
            margin: 0;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            padding: 10px;
            box-sizing: border-box;
        }

        .header {
            background-color: white;
            padding: 20px 25px;
            border-bottom: 1px solid #e9ecef;
            border-left: 4px solid #409eff;
            /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
        }

        .header h1 {
            color: #2c3e50;
            margin: 0;
            font-size: 24px;
            font-weight: 500;
        }

        .header p {
            color: #666;
            margin: 10px 0 0 0;
            font-size: 14px;
        }

        .tab-section {
            background-color: white;
            padding: 0 25px;
            border-bottom: 1px solid #e9ecef;
            margin-top: 10px;
        }

        .table-section {
            background-color: #ffffff;
            padding: 10px;
        }

        .task-table {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            overflow: hidden;
        }

        .status-pending {
            color: #e6a23c;
            background-color: #fdf6ec;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .status-review {
            color: #409eff;
            background-color: #ecf5ff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .status-completed {
            color: #67c23a;
            background-color: #f0f9ff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .deadline-overdue {
            color: #f56c6c;
            font-weight: bold;
        }

        .deadline-today {
            color: #e6a23c;
            font-weight: bold;
        }

        .deadline-future {
            color: #67c23a;
        }

        .deadline-info {
            font-size: 11px;
            color: #909399;
            margin-top: 2px;
        }

        .main-content {
            margin-top: 0;
        }

        .tab-label {
            font-size: 14px;
            font-weight: 500;
        }

        .tab-badge {
            margin-left: 8px;
        }

        .el-tabs__item {
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
        }

        .user-tag {
            color: #606266;
            background-color: #f4f4f5;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 8px;
        }

        .responsible-user {
            font-weight: 500;
            color: #2c3e50;
        }

        .proxy-user {
            color: #909399;
            font-size: 12px;
            margin-left: 8px;
        }

        .month-highlight {
            font-weight: 500;
            color: #409eff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="main-content">
            <div class="container">
                <!-- 页面标题 -->
                <div class="header">
                    <h1>👤 任务中心</h1>
                    <p>查看和管理个人任务状态，包括待提交、待审核和已完成的任务</p>
                </div>

                <!-- Tab切换 -->
                <div class="tab-section">
                    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                        <el-tab-pane label="待提交" name="pending">
                            <span slot="label">
                                <span class="tab-label">📝 待提交</span>
                                <el-badge :value="pendingCount" class="tab-badge" v-if="pendingCount > 0"></el-badge>
                            </span>
                        </el-tab-pane>
                        <el-tab-pane label="待审核" name="review">
                            <span slot="label">
                                <span class="tab-label">🔍 待审核</span>
                                <el-badge :value="reviewCount" class="tab-badge" v-if="reviewCount > 0"></el-badge>
                            </span>
                        </el-tab-pane>
                        <el-tab-pane label="已完成" name="completed">
                            <span slot="label">
                                <span class="tab-label">✅ 已完成</span>
                                <el-badge :value="completedCount" class="tab-badge"
                                    v-if="completedCount > 0"></el-badge>
                            </span>
                        </el-tab-pane>
                    </el-tabs>
                </div>

                <!-- 任务表格 -->
                <div class="table-section">
                    <div class="task-table">
                        <el-table :data="filteredTasks" border style="width: 100%" v-loading="loading">
                            <el-table-column prop="taskName" label="任务名称" min-width="200" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-link type="primary" @click="viewTask(scope.row)">{{ scope.row.taskName
                                        }}</el-link>
                                </template>
                            </el-table-column>

                            <el-table-column prop="month" label="月份" width="140" align="center">
                                <template slot-scope="scope">
                                    <span class="month-highlight">{{ scope.row.month }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="publishTime" label="发布时间" width="140" align="center">
                                <template slot-scope="scope">
                                    {{ formatDate(scope.row.publishTime) }}
                                </template>
                            </el-table-column>

                            <el-table-column prop="publisher" label="发布人" width="100" align="center">
                                <template slot-scope="scope">
                                    <span class="user-tag">{{ scope.row.publisher }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="status" label="任务状态" width="100" align="center">
                                <template slot-scope="scope">
                                    <span :class="getStatusClass(scope.row.status)">
                                        {{ getStatusText(scope.row.status) }}
                                    </span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="deadline" label="截止时间" width="160" align="center" sortable>
                                <template slot-scope="scope">
                                    <div>
                                        <div :class="getDeadlineClass(scope.row.deadline)">
                                            {{ formatDate(scope.row.deadline) }}
                                        </div>
                                        <div class="deadline-info">
                                            {{ getDeadlineInfo(scope.row.deadline) }}
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="responsible" label="责任人" width="120" align="center">
                                <template slot-scope="scope">
                                    <span class="responsible-user">{{ scope.row.responsible }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="proxy" label="代理人" width="120" align="center">
                                <template slot-scope="scope">
                                    <span class="proxy-user">{{ scope.row.proxy || '-' }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" width="250" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="viewTask(scope.row)">查看</el-button>
                                    <el-button size="mini" type="warning" @click="editTask(scope.row)"
                                        v-if="activeTab === 'pending' && scope.row.status === 'pending'">
                                        编辑
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 分页 -->
                        <div style="padding: 20px; text-align: right;">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper" :total="totalTasks">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑任务对话框 -->
        <el-dialog :visible.sync="dialogVisible" title="编辑任务" width="90%" top="5vh" :before-close="handleDialogClose">
            <iframe :src="dialogUrl" width="100%" :height="dialogHeight" frameborder="0"></iframe>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit">取消</el-button>
                <el-button type="primary" @click="submitEdit">提交</el-button>
            </span>
        </el-dialog>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    loading: false,
                    currentPage: 1,
                    pageSize: 10,
                    totalTasks: 0,
                    activeTab: 'pending',
                    dialogVisible: false,
                    dialogUrl: '',
                    dialogHeight: 600,

                    tasks: [
                        {
                            id: 1,
                            taskName: '2025年08月KPI填报',
                            month: '2025-01',
                            publishTime: '2025-01-01T10:00:00',
                            publisher: 'HR Admin',
                            status: 'pending',
                            deadline: '2025-01-31T23:59:59',
                            responsible: '张三',
                            proxy: '李四'
                        },
                        {
                            id: 2,
                            taskName: '2025年09月KPI填报',
                            month: '2025-02',
                            publishTime: '2025-01-15T14:30:00',
                            publisher: 'HR Admin',
                            status: 'pending',
                            deadline: '2025-02-15T23:59:59',
                            responsible: '王五',
                            proxy: null
                        },
                        {
                            id: 3,
                            taskName: '2025年10月KPI填报',
                            month: '2024-12',
                            publishTime: '2024-12-01T09:00:00',
                            publisher: 'Manager',
                            status: 'review',
                            deadline: '2024-12-31T23:59:59',
                            responsible: '赵六',
                            proxy: '钱七'
                        },
                        {
                            id: 4,
                            taskName: '2025年07月KPI填报',
                            month: '2024-12',
                            publishTime: '2024-11-15T16:20:00',
                            publisher: 'HR Admin',
                            status: 'review',
                            deadline: '2024-12-20T23:59:59',
                            responsible: '孙八',
                            proxy: null
                        },
                        {
                            id: 5,
                            taskName: '2025年06月KPI填报',
                            month: '2024-11',
                            publishTime: '2024-10-20T11:45:00',
                            publisher: 'Training Dept',
                            status: 'completed',
                            deadline: '2024-11-30T23:59:59',
                            responsible: '周九',
                            proxy: '吴十'
                        },
                        {
                            id: 6,
                            taskName: '2025年05月KPI填报',
                            month: '2024-10',
                            publishTime: '2024-09-25T13:15:00',
                            publisher: 'Sales Manager',
                            status: 'completed',
                            deadline: '2024-10-15T23:59:59',
                            responsible: '郑十一',
                            proxy: null
                        },
                        {
                            id: 7,
                            taskName: '2025年04月KPI填报',
                            month: '2025-01',
                            publishTime: '2024-12-15T08:30:00',
                            publisher: 'Finance',
                            status: 'pending',
                            deadline: '2025-01-20T23:59:59',
                            responsible: '王十二',
                            proxy: '李十三'
                        },
                        {
                            id: 8,
                            taskName: '2025年03月KPI填报',
                            month: '2025-01',
                            publishTime: '2025-01-05T15:45:00',
                            publisher: 'Process Manager',
                            status: 'review',
                            deadline: '2025-01-25T23:59:59',
                            responsible: '张十四',
                            proxy: null
                        }
                    ]
                }
            },

            computed: {
                filteredTasks() {
                    let filtered = this.tasks;

                    // 按Tab状态筛选
                    if (this.activeTab === 'pending') {
                        filtered = filtered.filter(task => task.status === 'pending');
                    } else if (this.activeTab === 'review') {
                        filtered = filtered.filter(task => task.status === 'review');
                    } else if (this.activeTab === 'completed') {
                        filtered = filtered.filter(task => task.status === 'completed');
                    }

                    this.totalTasks = filtered.length;
                    return filtered;
                },

                pendingCount() {
                    return this.tasks.filter(task => task.status === 'pending').length;
                },

                reviewCount() {
                    return this.tasks.filter(task => task.status === 'review').length;
                },

                completedCount() {
                    return this.tasks.filter(task => task.status === 'completed').length;
                }
            },

            mounted() {
                this.totalTasks = this.tasks.length;
            },

            methods: {
                formatDate(dateString) {
                    const date = new Date(dateString);
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                },

                getStatusClass(status) {
                    switch (status) {
                        case 'pending':
                            return 'status-pending';
                        case 'review':
                            return 'status-review';
                        case 'completed':
                            return 'status-completed';
                        default:
                            return '';
                    }
                },

                getStatusText(status) {
                    switch (status) {
                        case 'pending':
                            return '待提交';
                        case 'review':
                            return '待审核';
                        case 'completed':
                            return '已完成';
                        default:
                            return '未知';
                    }
                },

                getDeadlineClass(deadline) {
                    const today = new Date();
                    const taskDeadline = new Date(deadline);
                    const diffTime = taskDeadline.getTime() - today.getTime();
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

                    if (diffDays < 0) {
                        return 'deadline-overdue';
                    } else if (diffDays === 0) {
                        return 'deadline-today';
                    } else {
                        return 'deadline-future';
                    }
                },

                getDeadlineInfo(deadline) {
                    const today = new Date();
                    const taskDeadline = new Date(deadline);
                    const diffTime = taskDeadline.getTime() - today.getTime();
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

                    if (diffDays < 0) {
                        return `已逾期 ${Math.abs(diffDays)} 天`;
                    } else if (diffDays === 0) {
                        return '今日截止';
                    } else {
                        return `剩余 ${diffDays} 天`;
                    }
                },

                handleTabClick(tab) {
                    this.currentPage = 1;
                    this.$message.info(`切换到${tab.label.replace(/[📝🔍✅]/g, '').trim()}`);
                },

                viewTask(task) {
                    this.$message.info(`查看任务：${task.taskName}`);
                    // 这里可以跳转到任务详情页面或打开详情弹窗
                },

                submitTask(task) {
                    this.$confirm(`确定要提交任务"${task.taskName}"吗？`, '提交确认', {
                        confirmButtonText: '确定提交',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        // 更新任务状态为待审核
                        task.status = 'review';
                        this.$message.success(`任务"${task.taskName}"已提交，等待审核`);
                    }).catch(() => {
                        this.$message.info('已取消提交');
                    });
                },

                editTask(task) {
                    // Open the employee-indicator-table.html in a dialog
                    this.dialogUrl = 'employee-indicator-table.html';
                    this.dialogHeight = window.innerHeight * 0.8;
                    this.dialogVisible = true;
                },

                submitEdit() {
                    // Handle submit action
                    this.$message.success('任务已提交');
                    this.dialogVisible = false;
                },

                cancelEdit() {
                    // Handle cancel action
                    this.$message.info('操作已取消');
                    this.dialogVisible = false;
                },

                handleDialogClose(done) {
                    // Handle dialog close event
                    this.$confirm('确认关闭？未保存的数据将会丢失')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => { });
                },

                handleSizeChange(val) {
                    this.pageSize = val;
                },

                handleCurrentChange(val) {
                    this.currentPage = val;
                }
            }
        });
    </script>
</body>

</html>